var tween = {
    Linear: function(t,b,c,d){ return c*t/d + b; },
    Quad_easeIn: function(t,b,c,d){
        return c*(t/=d)*t + b;
    },
    Quad_easeOut: function(t,b,c,d){
        return -c *(t/=d)*(t-2) + b;
    },
    Quad_easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    Cubic_easeIn: function(t,b,c,d){
        return c*(t/=d)*t*t + b;
    },
    Cubic_easeOut: function(t,b,c,d){
        return c*((t=t/d-1)*t*t + 1) + b;
    },
    Cubic_easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    },
    Quart_easeIn: function(t,b,c,d){
        return c*(t/=d)*t*t*t + b;
    },
    Quart_easeOut: function(t,b,c,d){
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    Quart_easeInOut: function(t,b,c,d){
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    }
}

class Animate {
    constructor(el) {
        this.dom = el;
        this.startTime = 0;
        this.startPos = 0;
        this.endPos = 0;
        this.propetryName = null;
        this.easing = null;
        this.duration = null;
        this.timeId = null;
    }

    start(propertyName, endPos, duration, easing) {
        this.startTime = +new Date();
        this.propetryName = propertyName;
        this.startPos = this.dom.getBoundingClientRect()[this.propetryName] - this.dom.parentNode.getBoundingClientRect()[this.propetryName];
        this.endPos = endPos;
        this.duration = duration;
        this.easing = tween[easing];
        this.timeId = setInterval(() => {
            if (this.step() === false) {
                clearInterval(this.timeId)
            }
        }, 1000 / 16);
    }

    step() {
        let t = +new Date();
        if (t > this.startTime + this.duration) {
            this.update(this.endPos);
            return false;
        }
        let pos = this.easing(
            t - this.startTime,
            this.startPos,
            this.endPos - this.startPos,
            this.duration
        );
        this.update(pos);
    }

    update(pos) {
        this.dom.style[this.propetryName] = pos + 'px';
        console.log(this.startPos + '$--');
    }
}